<template>
    <div class="container">
        <div class="search-panel">
            <input id="insearch" @input="searchByName" v-model.trim="q" :value="keywords" ref="insearch" @keyup.enter="search" autofocus placeholder="請輸入建案名、位置或區域範圍" class="form-control search-input" type="search">
            <i v-if="q" @click="clear" class="clear"></i>
            <a href="#" class="cancelSearch" @click="cancelSearch">取消</a>
        </div>
        
        <!-- 搜索提示列表 -->
        <div class="houselists" v-if="houselists.length>0">
            <a v-for="house in houselists" target="_blank" class="house" :href="baseURI+house.hid">
                <span class="build_name">{{house.build_name}}</span>
                <div class="right">
                    <em class="section">{{house.section}}</em>
                    <em class="price">{{house.price}}</em>
                </div>
            </a>
        </div>

        <!-- 搜索記錄 -->
        <div class="historys" v-if="q.length==0">
            <div class="address">
                <span class="title">搜尋記錄</span>
                <span @click="clearHistorys" class="glyphicon glyphicon-trash"></span>
            </div>
            <div class="item" @click="searchByHistory(address)" v-for="address in historys">{{address}}</div>
        </div>

        <!-- 熱門搜索 -->
        <div class="historys" v-if="q.length==0">
            <div class="address">
                <span class="title">熱門搜索</span>
            </div>
            <a :href="baseURI+hot.hid" target="_blank" class="item" v-for="hot in hotQ">{{hot.build_name}}</a>
        </div>
    </div>
</template>

<script>
import bus from '../assets/js/bus.js'
import NProgress from 'nprogress'

NProgress.configure({ showSpinner: false });

export default{
    name: 'searchPanel',
    props: ['keywords'],
    created(){
        this.q = this.keywords || ''
        this.searchByName()

        NProgress.start()
        this.$http.post( 'api/housing/hotSearch?device=touch' ).then( resolved => {
            this.hotQ = resolved.body.data
            NProgress.done()
        } )
    },
    mounted(){
        this.$refs.insearch.focus()
    },
    data(){
        return {
            baseURI: 'https://m.591.com.tw/show/detail/housing/',
            q: '',      // 搜索關鍵字
            bq: '',     // 前一次搜索的關鍵字
            houselists: [], // 搜索得到的房子
            historys: JSON.parse( localStorage.getItem( 'historys' ) ) || [],    // 歷史搜索記錄
            hotQ: [],        // 熱門搜索
            filterData:{
                keywords: '',
                p: 1,
            }
        }
    },
    methods:{
        cancelSearch(){
            bus.$emit( 'cancelSearch' )
        },
        clear(){
            /* 將關鍵字清空 */
            this.q = this.bq = this.filterData.keywords = ''
            /* 將房子列表清空 */
            this.houselists = []
            /* autofocus */
            this.$refs.insearch.focus()
            /* 向父组件清空q */
            bus.$emit( 'newhouses', this.filterData );
        },
        clearHistorys(){        // 清除歷史記錄
            localStorage.setItem( 'historys', null )
            this.historys = []
        },
        searchByHistory( address ){     // 通過搜尋記錄關鍵字查詢
            this.filterData.keywords = address
            bus.$emit( 'newhouses', this.filterData );
            bus.$emit( 'cancelSearch' )
        },
        search(){
            // 什麼都沒有輸入
            if ( !this.q ) {
                return
            }

            if ( this.historys.indexOf( this.q ) == -1 ) {
                this.historys.push( this.q )
                localStorage.setItem( 'historys', JSON.stringify( this.historys ) );
            }

            this.filterData.keywords = this.q
            bus.$emit( 'newhouses', this.filterData );
            bus.$emit( 'cancelSearch' )
        },
        searchByName(){
            /* 兩次關鍵字一樣 */
            if ( this.q == this.bq ) {
                return
            }

            /* 關鍵字為空 */
            if ( this.q == '' ) {
                this.clear()
            }

            NProgress.start()
            this.$http.post( 'api/housing/searchByName?device=touch', {"q":this.q} ).then( resolved => {
                this.houselists = resolved.body.data
                this.bq = this.q
                NProgress.done()
            } )
    
            // 向父組件傳遞搜索關鍵字
            this.filterData.keywords = this.q
            bus.$emit( 'newhouses', this.filterData )
        }
    }
}
</script>

<style scoped>
    .container{
        background-color: #f7f7f7;
    }
    .empty{
        height: 5rem;
        line-height: 5rem;
    }
    .search-panel{
        height: .9rem;
        padding-left: .2rem;
        padding-right: .2rem;
        border-bottom: 1px solid #ededed;
        padding-top: .1rem;
        position: relative;
        display: flex;
    }
    .search-panel:after{
        content: '';
        position: absolute;
        display: block;
        top: 100%;
        left: 0;
        width: 200%;
        border-bottom: 1px solid #eee;
        transform-origin: 0 0;
        transform: scale(0.5);
    }
    .search-input{
        width: 100%;
        height: .68rem;
        border: 1px solid #ebebeb;
        padding-left: .65rem;
        border-radius: 3px;
        background: #fff url() no-repeat .2rem;
        background-size: .24rem .28rem;
        outline: none;
        font-size: .26rem;
    }
    .clear{
        display: inline-block;
        width: .66rem;
        height: .44rem;
        position: absolute;
        right: 1.2rem;
        top: .2rem;
        font-style: normal;
        font-size: .32rem;
        color: #bababa;
        background: url(  ) no-repeat 100%;
        background-size: .44rem .44rem;
    }
    .cancelSearch{
        display: inline-block;
        width: .8rem;
        height: .68rem;
        line-height: .68rem;
        text-align: center;
        margin-left: .1rem;
        font-size: .26rem;
        color: #333;
        text-decoration: none;
    }
    /* 搜索單條樣式 */
    .house{
        width: 100%;
        display: flex;
        justify-content: space-between;
        text-decoration: none;
        border-bottom: 1px solid #eee;
    }
    .right{
        padding-right: .2rem;
        height: .97rem;
        line-height: .97rem;
    }
    .build_name{
        padding-left: .2rem;
        height: .97rem;
        line-height: .97rem;
        font-size: .3rem;
        color: #282828;
        display: inline-block;
    }
    em{
        display: inline-block;
        height: .5rem;
        line-height: .5rem;
        background: #eee;
        border-radius: 2px;
        font-size: .24rem;
        color: #888;
        margin-left: .2rem;
        padding-left: .2rem;
        padding-right: .2rem;
        font-style: normal;
    }
    /* 搜尋記錄 */
    .historys .address{
        display: flex;
        justify-content: space-between;
        color: #666;
        margin-bottom: .26rem;
        margin-top: .4rem;
    }
    .historys .title{
        font-size: .3rem;
    }
    .historys .glyphicon-trash{
        display: inline-block;
        width: .28rem;
        height: .28rem;
        margin-right: .2rem;
        margin-top: .1rem;
    }
    .historys .item{
        display: inline-block;
        height: .6rem;
        line-height: .6rem;
        padding-left: .26rem;
        padding-right: .26rem;
        border: 1px solid #ddd;
        border-radius: 5px;
        font-size: .28rem;
        color: #282828;
        margin-right: .2rem;
        margin-bottom: .2rem;
        font-weight: 400;
        text-decoration: none;
    }
</style>